<template>
	<view class="index-container">
		<!-- 返回主菜单按钮 -->
		<view class="back-button" @tap="backToDashboard">
			<view class="back-button-inner">
				<text class="back-icon">↩</text>
				<text class="back-text">返回主菜单</text>
			</view>
			<view class="back-button-glow"></view>
		</view>

		<!-- 顶部状态卡片 -->
		<view class="status-card">
			<view class="month-balance">
				<text class="label">当月结余</text>
				<text class="amount">¥{{ formatNumber(monthBalance) }}</text>
			</view>
			<view class="stats-badges">
				<view class="badge">
					<text class="label">支出</text>
					<text class="value">¥{{ formatNumber(monthExpense) }}</text>
				</view>
				<view class="badge">
					<text class="label">收入</text>
					<text class="value">¥{{ formatNumber(monthIncome) }}</text>
				</view>
			</view>
			<!-- 预算进度环 -->
			<view class="budget-progress">
				<view class="progress-ring">
					<text class="progress-text">{{ budgetProgress }}%</text>
				</view>
				<text class="label">预算剩余</text>
			</view>
		</view>
		
		<!-- 广告区域 -->
		<view class="ad-section">
			<view class="ad-content">
				<view class="ad-info">
					<text class="ad-label">推广</text>
					<text class="ad-title">会员特权</text>
					<text class="ad-desc">解锁高级功能，提升财务管理效率</text>
					<view class="ad-button" @tap="handleAdClick">了解详情</view>
				</view>
				<view class="ad-graphics">
					<view class="ad-icon">💎</view>
					<view class="ad-badge">限时优惠</view>
				</view>
			</view>
			<view class="ad-footer">
				<text class="ad-price">广告位招租：50 / 周、300 / 月</text>
				<text class="ad-contact" @tap="contactAd">联系我们</text>
			</view>
		</view>
		
		<!-- 智能图表区 -->
		<view class="chart-section">
			<view class="chart-header">
				<text class="title">消费分析</text>
				<view class="chart-tabs">
					<text :class="['tab', activeChart === 'pie' ? 'active' : '']" @tap="switchChart('pie')">分类占比</text>
					<text :class="['tab', activeChart === 'line' ? 'active' : '']" @tap="switchChart('line')">周支出</text>
				</view>
			</view>
			<view class="chart-container">
				<!-- 图表区域 -->
			</view>
		</view>

		<!-- 快捷入口 -->
		<view class="quick-actions">
			<view class="section-title">快捷操作</view>
			<!-- 固定账单提醒 -->
			<view class="reminder-list">
				<view class="reminder-item" v-for="(item, index) in fixedBills" :key="index">
					<text class="name">{{ item.name }}</text>
					<text class="date">{{ item.date }}</text>
				</view>
			</view>
			<!-- 快速记账按钮 -->
			<view class="quick-record">
				<view class="quick-btn" v-for="(item, index) in quickCategories" :key="index" @tap="quickRecord(item)">
					<text class="icon">{{ item.icon }}</text>
					<text class="name">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 底部导航菜单 -->
		<tab-bar active-tab="home"></tab-bar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import TabBar from '../components/TabBar.vue';

	// 数据
	const monthBalance = ref(2800.50);
	const monthExpense = ref(3200.50);
	const monthIncome = ref(6000.00);
	const budgetProgress = ref(65);
	const activeChart = ref('pie');

	// 固定账单
	const fixedBills = ref([{
			name: '房租',
			date: '每月20日',
			amount: 2000
		},
		{
			name: '信用卡',
			date: '每月25日',
			amount: 1500
		}
	]);

	// 快速记账分类
	const quickCategories = ref([{
			name: '餐饮',
			icon: '🍚'
		},
		{
			name: '交通',
			icon: '🚌'
		},
		{
			name: '购物',
			icon: '🛍️'
		},
		{
			name: '娱乐',
			icon: '🎮'
		}
	]);

	// 方法
	const formatNumber = (num) => {
		return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	};

	const switchChart = (type) => {
		activeChart.value = type;
	};

	const quickRecord = (category) => {
		// 快速记账逻辑
		uni.navigateTo({
			url: '/moneyManage/record/record?category=' + category.name
		});
	};

	// 返回到主Dashboard
	const backToDashboard = () => {
		uni.navigateBack({
			fail: () => {
				// 如果返回失败（没有上一页），直接跳转到dashboard
				uni.reLaunch({
					url: '/pages/dashboard/dashboard'
				});
			}
		});
	};

	// 广告点击处理
	const handleAdClick = () => {
		uni.showToast({
			title: '即将推出，敬请期待',
			icon: 'none'
		});
	};
	
	// 联系广告主
	const contactAd = () => {
		uni.showModal({
			title: '联系我们',
			content: '如需投放广告或定制开发，请添加客服：HH-188-199',
			showCancel: false,
			confirmText: '知道了'
		});
	};

	onMounted(() => {
		// 初始化图表等
	});
</script>

<style lang="scss" scoped>
	.index-container {
		padding: 20px;
		background: linear-gradient(135deg, #e8f0ff 0%, #f0f7ff 50%, #f5faff 100%);
		min-height: 100vh;
		padding-top: 100upx;
		position: relative;
	}

	.back-button {
		position: fixed;
		top: 60rpx;
		left: 30rpx;
		z-index: 100;
		transition: all 0.3s;
		
		.back-button-inner {
			display: flex;
			align-items: center;
			background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
			color: #fff;
			padding: 14rpx 28rpx;
			border-radius: 40rpx;
			box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.3);
			transition: all 0.3s;
			
			&:active {
				transform: scale(0.96);
				box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.2);
			}
		}
		
		.back-icon {
			font-size: 34rpx;
			margin-right: 8rpx;
		}
		
		.back-text {
			font-size: 26rpx;
			font-weight: 500;
		}
		
		.back-button-glow {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: linear-gradient(135deg, #007aff 0%, #36a0ff 100%);
			border-radius: 40rpx;
			opacity: 0.4;
			filter: blur(20rpx);
			z-index: -1;
			transform: scale(0.8);
		}
	}

	.status-card {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

		.month-balance {
			margin-bottom: 20px;

			.label {
				font-size: 14px;
				color: #666;
			}

			.amount {
				display: block;
				font-size: 32px;
				font-weight: bold;
				color: #333;
				margin-top: 4px;
			}
		}

		.stats-badges {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;

			.badge {
				background-color: #f5f5f5;
				padding: 10px 20px;
				border-radius: 12px;
				flex: 1;
				margin: 0 5px;

				.label {
					font-size: 12px;
					color: #999;
				}

				.value {
					display: block;
					font-size: 16px;
					color: #333;
					margin-top: 4px;
				}
			}
		}
	}

	.ad-section {
		background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
		border-radius: 16px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		overflow: hidden;
		position: relative;
		
		.ad-content {
			display: flex;
			justify-content: space-between;
			padding: 20px;
			position: relative;
			
			&::before {
				content: '';
				position: absolute;
				top: -60rpx;
				right: -60rpx;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				background: rgba(0, 122, 255, 0.08);
				z-index: 0;
			}
			
			.ad-info {
				flex: 1;
				position: relative;
				z-index: 1;
				
				.ad-label {
					display: inline-block;
					font-size: 22rpx;
					color: #999;
					background-color: rgba(153, 153, 153, 0.1);
					padding: 4rpx 12rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}
				
				.ad-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					display: block;
					margin-bottom: 6rpx;
				}
				
				.ad-desc {
					font-size: 24rpx;
					color: #666;
					display: block;
					margin-bottom: 20rpx;
					line-height: 1.4;
				}
				
				.ad-button {
					display: inline-block;
					padding: 10rpx 30rpx;
					background-color: #007aff;
					color: #fff;
					font-size: 26rpx;
					border-radius: 30rpx;
					box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.2);
				}
			}
			
			.ad-graphics {
				position: relative;
				z-index: 1;
				
				.ad-icon {
					font-size: 90rpx;
					margin-right: 10rpx;
					margin-top: 10rpx;
					display: block;
					text-align: center;
					filter: drop-shadow(0 4rpx 6rpx rgba(0, 0, 0, 0.1));
				}
				
				.ad-badge {
					position: absolute;
					top: 0;
					right: -10rpx;
					background-color: #ff9500;
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 12rpx;
					border-radius: 10rpx;
					transform: rotate(20deg);
					box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}
			}
		}
		
		.ad-footer {
			background-color: rgba(0, 122, 255, 0.05);
			padding: 12rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.ad-price {
				font-size: 20rpx;
				color: #999;
			}
			
			.ad-contact {
				font-size: 20rpx;
				color: #007aff;
				text-decoration: underline;
			}
		}
	}

	.chart-section {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 20px;

		.chart-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;

			.title {
				font-size: 16px;
				font-weight: bold;
			}

			.chart-tabs {
				.tab {
					padding: 6px 12px;
					font-size: 14px;
					color: #666;
					margin-left: 10px;

					&.active {
						color: #007aff;
						background-color: #e6f2ff;
						border-radius: 20px;
					}
				}
			}
		}
	}

	.quick-actions {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 150rpx;

		.section-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		.reminder-list {
			margin-bottom: 20px;

			.reminder-item {
				display: flex;
				justify-content: space-between;
				padding: 12px 0;
				border-bottom: 1px solid #f5f5f5;

				.name {
					color: #333;
				}

				.date {
					color: #999;
					font-size: 14px;
				}
			}
		}

		.quick-record {
			display: flex;
			justify-content: space-between;

			.quick-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10px;

				.icon {
					font-size: 24px;
					margin-bottom: 4px;
				}

				.name {
					font-size: 12px;
					color: #666;
				}
			}
		}
	}
</style>